<template>
  <div class="profile-login">
    <nav-bar class="my-profile">
      <div slot="center">我的档案</div>
    </nav-bar>

    <div class="login">
      <div class="avatar">
        <img src="~assets/images/profile/avatar.svg" alt="" />
      </div>
      <div class="register">
        <p>登录/注册</p>
        <p>
          <img src="~assets/images/profile/phone.svg" alt="" />
          暂无绑定手机号
        </p>
      </div>
      <div class="next">
        <img src="~assets/images/profile/next.svg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar/NavBar.vue'

export default {
  name: 'ProfileLogin',
  props: {},
  components: {
    NavBar
  },
  data () {
    return {}
  },
  created () {},
  mounted () {},
  computed: {},
  methods: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.profile-login {
  color: #fff;
  background-color: var(--color-tint);

  .my-profile {
    font-size: 18px;
    box-shadow: none;
  }

  .login {
    display: flex;
    height: 100px;
    align-items: center;

    .avatar {
      width: 80px;
      height: 80px;

      img {
        width: 100%;
      }
    }

    .register {
      flex: 1;

      p:first-child {
        font-size: 16px;
        margin-bottom: 3px;
        padding-left: 5px;
      }

      p:last-child {
        font-size: 12px;
      }

      img {
        width: 20px;
        vertical-align: middle;
      }
    }

    .next {
      width: 25px;
      height: 25px;
      margin-right: 15px;
    }
  }
}
</style>
